<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>FlickerService Demo Page</title>
	<link rel="stylesheet" href="css/syntaxhighlighter.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<style type="text/css" media="screen">
		.mod { position: relative; margin-bottom: 50px; }
		.code { width: 50%; }
		.results { width: 50%; position: absolute; right: 0; top: 0; }
	</style>
	<script src="../../src/flickrservice.js" type="text/javascript" charset="utf-8"></script>	
	<script src="syntaxhighlighter/shCore.js" type="text/javascript" charset="utf-8"></script>
	<script src="syntaxhighlighter/shBrushJScript.js" type="text/javascript" charset="utf-8"></script>	
	<script src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		YAHOO.util.Event.onDOMReady(function() {
			dp.sh.ClipboardSwf = 'syntaxhighlighter/clipboard.swf';  
			dp.sh.HighlightAll('code', false);		

			var flickr = new FlickrService({
				apiKey: "4854b66d900b3214426f88b147d31b3f",
				secret: "0d88d53adaed4aab"
			});
			
			YAHOO.util.Event.on(document.getElementsByTagName('button'), 'click', function(e) {
				var button = YAHOO.util.Event.getTarget(e);
				var service = button.id.split('-')[1];
				
				switch(service) {
					case "flickr.photos.search":
						flickr.photos.search({
							tags: "microsoft",
							per_page: 20,
							onComplete: function(res) {
								var resultsEl = document.getElementById('results-flickr.photos.search');		
								resultsEl.innerHTML = '';
								for(var i=0, len=res.photos.photo.length; i<len; i++) {
									var photo = res.photos.photo[i];
									var url = flickr.getPhotoUrl(photo, 's');
									var img = new Image;
									img.src = url;
									resultsEl.appendChild(img);
								};
							},
							onLoading: function() {
								document.getElementById('results-flickr.photos.search').innerHTML = 'Loading...';
							}
						});
						break;
					case "flickr.photos.getContactsPhotos":
						flickr.photos.getContactsPhotos({
							count: 10,
							onComplete: function(res) {
								var resultsEl = document.getElementById('results-flickr.photos.getContactsPhotos');		
								resultsEl.innerHTML = '';
								for(var i=0, len=res.photos.photo.length; i<len; i++) {
									var photo = res.photos.photo[i];
									var url = flickr.getPhotoUrl(photo, 's');
									var img = new Image;
									img.src = url;
									resultsEl.appendChild(img);
								};		
							},
							onLoading: function() {
								document.getElementById('results-flickr.photos.getContactsPhotos').innerHTML = 'Loading...';
							}
						});
						break;
					default:
						break;
				};
			});
		});
	</script>	
</head>

<body>
	<div id="main">
		
		<h4>Creating the Flickr Service Object</h4>
		<div class="mod" id="instantiation">
			<div class="code">
				<textarea name="code" class="JScript">
var flickr = new FlickrService({
	apiKey: "4854b66d900b3214426f88b147d31b3f",
	secret: "0d88d53adaed4aab"
});
				</textarea>
			</div>
		</div>
		
		<h4>flickr.photos.search</h4>	
		<div class="mod" id="flickr.photos.search">
			<div class="code">
				<textarea name="code" class="JScript">
flickr.photos.search({
	tags: "microsoft",
	per_page: 20,
	onComplete: function(res) {
		var resultsEl = document.getElementById('results-flickr.photos.search');		
		resultsEl.innerHTML = '';
		for(var i=0, len=res.photos.photo.length; i<len; i++) {
			var photo = res.photos.photo[i];
			var url = flickr.getPhotoUrl(photo, 's');
			var img = new Image;
			img.src = url;
			resultsEl.appendChild(img);
		};
	},
	onLoading: function() {
		document.getElementById('results-flickr.photos.search').innerHTML = 'Loading...';
	}
});
				</textarea>
				<button id="execute-flickr.photos.search">Execute</button>
			</div>
			<div id="results-flickr.photos.search" class="results"></div>
		</div>

		<h4>flickr.photos.getContactsPhotos (requires READ auth)</h4>			
		<div class="mod" id="flickr.photos.getContactsPhotos">
			<div class="code">
				<textarea name="code" class="JScript">
flickr.photos.getContactsPhotos({
	count: 10,
	onComplete: function(res) {
		var resultsEl = document.getElementById('results-flickr.photos.getContactsPhotos');		
		resultsEl.innerHTML = '';
		for(var i=0, len=res.photos.photo.length; i<len; i++) {
			var photo = res.photos.photo[i];
			var url = flickr.getPhotoUrl(photo, 's');
			var img = new Image;
			img.src = url;
			resultsEl.appendChild(img);
		};		
	},
	onLoading: function() {
		document.getElementById('results-flickr.photos.getContactsPhotos').innerHTML = 'Loading...';
	}
});
				</textarea>
				<button id="execute-flickr.photos.getContactsPhotos">Execute</button>
			</div>
			<div id="results-flickr.photos.getContactsPhotos" class="results"></div>
		</div>
		
	</div>	
</body>
</html>